<template>
  <div class="step-2-container">
    <div class="step2-content-box">
      <WorldSim v-if="curSimType === 'worldsim'" :fromCreateTaskPage="true"/> 
      <LogSim v-else-if="curSimType === 'log2world'" :fromCreateTaskPage="true"/>
      <MapTest v-else :fromCreateTaskPage="true"/>
    </div>
    <div class="btn-group">
      <el-button @click="previousStep" size="small" >上一步</el-button>
      
      <el-button @click="nextStep" size="small" type="primary">下一步</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import WorldSim from '@/views/scene/worldsim/index.vue'
import LogSim from '@/views/scene/log2world/index.vue'
import MapTest from '@/views/scene/maptest/index.vue'
export default {
  components: {
      WorldSim,
      LogSim,
      MapTest
  },
  computed:{
    ...mapGetters(['createCaseForms']),
    ...mapState({
        caseIds: state => state.case.caseIds,
        caseGroupIds: state => state.case.caseGroupIds,
        caseCategoryIds: state => state.case.caseCategoryIds,
    }),
    curSimType(){
      return this.createCaseForms.sim_type
    }
  }, 
  methods:{
    previousStep(){
      this.$emit('previousStep')
    },
    nextStep(){
      if(this.caseIds.length < 1 && this.caseGroupIds.length <1 && this.caseCategoryIds.length <1) {
        this.$message.warning('请选中需要运行的case或组,再点击下一步')
        return
      }
      this.$emit('nextStep')
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/vars.scss' ;
  .step-2-container{
    margin-top: 0px;

    .step2-content-box {
      margin: 0;
      height: calc(100vh - 200px);
      ::v-deep .main-wrapper .scene-left{
        height: calc(100vh - 40px - $header-height - 130px);
        overflow: auto;
        // height: calc(100% - 40px);
        .my-tree{
          // height: 1010px;
        }
      }
      ::v-deep .main-wrapper .case-right{
        height: calc(100vh - 40px - $header-height - 130px);
        // height: calc(100% - 40px);
        .my-table{
          height: calc(100% - 80px);
        }
      }
    }
    .btn-group{
      margin: 0 0 20px 30px;
    }
  }
</style>